<template>
  <div class="css2_5">
    <h1>2.5 2D/3D转换</h1>
    <div class="css2_5_1">
      <h2>2.5.1 CSS3 2D转换</h2>
      <p>
        <pre>
          通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
新的转换属性
下面的表格列出了所有的转换属性：
        </pre>
      </p>
      <table border="1px">
        <tr>
          <th>属性</th>
          <th>描述</th>
          <th>CSS</th>
        </tr>
        <tr>
          <td>transform</td>
          <td>向元素应用 2D 或 3D 转换。</td>
          <td>3</td>
        </tr>
        <tr>
          <td>transform-origin</td>
          <td>允许你改变被转换元素的位置。</td>
          <td>3</td>
        </tr>
      </table>
      <h2>2D Transform方法</h2>
      <table border="1px">
        <tr>
          <th>函数</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>matrix(n,n,n,n,n,n)</td>
          <td>定义 2D 转换，使用六个值的矩阵</td>
        </tr>
        <tr>
          <td>translate(x,y)</td>
          <td>定义 2D 转换，沿着 X 和 Y 轴移动元素。</td>
        </tr>
        <tr>
          <td>translateX(n)</td>
          <td>定义 2D 转换，沿着 X 轴移动元素</td>
        </tr>
        <tr>
          <td>translateY(n)</td>
          <td>定义 2D 转换，沿着 Y 轴移动元素。</td>
        </tr>
        <tr>
          <td>scale(x,y)</td>
          <td>定义 2D 缩放转换，改变元素的宽度和高度。</td>
        </tr>
        <tr>
          <td>scaleX(n)</td>
          <td>定义 2D 缩放转换，改变元素的宽度</td>
        </tr>
        <tr>
          <td>scaleY(n)</td>
          <td>定义 2D 缩放转换，改变元素的高度。</td>
        </tr>
        <tr>
          <td>rotate(angle)</td>
          <td>定义 2D 旋转，在参数中规定角度。</td>
        </tr>
        <tr>
          <td>skew(x-angle,y-angle)</td>
          <td>定义 2D 倾斜转换，沿着 X 和 Y 轴。</td>
        </tr>
        <tr>
          <td>skewX(angle)</td>
          <td>定义 2D 倾斜转换，沿着 X 轴</td>
        </tr>
        <tr>
          <td>skewY(angle)</td>
          <td>定义 2D 倾斜转换，沿着 Y 轴。</td>
        </tr>
      </table>
      <p>
        <pre>
          matrix(n,n,n,n,n,n)实例：使用六个值的矩阵
 div {
            width: 100px;
            height: 75px;
            background-color: yellow;
            border: 1px solid black;
        }

        div#div2 {
            transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
            -ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
            /* IE 9 */
            -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
            /* Firefox */
            -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
            /* Safari and Chrome */
            -o-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
            /* Opera */
        }
        </pre>
      </p>
        <img src="../assets/images/3.36.png" alt="">
        <p></p>
        <p>
          <pre>
            translate(x,y)实例：xy指平移的多少距离，也可以用%来表示
div {
            width: 300px;
            height: 300px;
            background-color: #ccc;
             transform: translate(100px,100px);/*分别沿着x轴和y轴平移100px */
        }
          </pre>
        </p>
        <img style="width:300px" src="../assets/images/3.37.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.38.png" alt="">
        <p></p>
        <p>
          <pre>
            scale(x,y)实例：xy指倍数不需加单位
 div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            transform: scale(2); //宽高缩放为原宽高的2倍
        }
          </pre>
        </p>
        <img style="width:300px;" src="../assets/images/3.39.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.40.png" alt="">
        <p></p>
        <p>
          <pre>
            rotate(angle)实例：angle为旋转度数，需加单位deg，正为顺时针，负为逆时针，默认是以中心点旋转
div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            transform: rotate(45deg);
        }
          </pre>
        </p>
        <img style="width:300px;" src="../assets/images/3.41.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.42.png" alt="">
        <p></p>
        <p>
          <pre>
            skew(x-angle,y-angle)实例：angle为倾斜度数，需加单位deg
div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            transform: skew(45deg);
        }
          </pre>
        </p>
         <img style="width:300px;" src="../assets/images/3.43.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.44.png" alt="">
    </div>
    <div class="css2_5_2">
      <h2>2.5.2  CSS3 3D转换</h2>
      <p>
        <pre>
          CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中，您将学到其中的一些 3D 转换方法：
rotateX()
rotateY()
<h2>3D Transform 方法</h2> 
        </pre>
      </p>
      <table border="1px">
        <tr>
          <th>函数</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td>
          <td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td>
        </tr>
        <tr>
          <td>translate3d(x,y,z)</td>
          <td>定义 3D 转化。</td>
        </tr>
        <tr>
          <td>translateX(x)</td>
          <td>定义 3D 转化，仅使用用于 X 轴的值。</td>
        </tr>
        <tr>
          <td>translateY(y)</td>
          <td>定义 3D 转化，仅使用用于 Y 轴的值。</td>
        </tr>
        <tr>
          <td>translateZ(z)</td>
          <td>定义 3D 转化，仅使用用于 Z 轴的值。</td>
        </tr>
        <tr>
          <td>scale3d(x,y,z)</td>
          <td>定义 3D 缩放转换。</td>
        </tr>
        <tr>
          <td>scaleX(x)</td>
          <td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td>
        </tr>
        <tr>
          <td>scaleY(y)</td>
          <td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td>
        </tr>
        <tr>
          <td>scaleZ(z)</td>
          <td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td>
        </tr>
        <tr>
          <td>rotate3d(x,y,z,angle)</td>
          <td>定义 3D 旋转。</td>
        </tr>
        <tr>
          <td>rotateX(angle)</td>
          <td>定义沿 X 轴的 3D 旋转。</td>
        </tr>
        <tr>
          <td>rotateY(angle)</td>
          <td>定义沿 Y 轴的 3D 旋转。</td>
        </tr>
        <tr>
          <td>rotateZ(angle)</td>
          <td>定义沿 Z 轴的 3D 旋转。</td>
        </tr>
        <tr>
          <td>perspective(n)</td>
          <td>定义 3D 转换元素的透视视图。</td>
        </tr>
      </table>
      <p>
        <pre>
          translate3d(x,y,z)实例：xyz三个是不能省略的，如果不用就写0，其中z轴是沿着垂直于屏幕的方向移动的，所以要想看到效果，需加透视perspective
        </pre>
      </p>
        <img src="../assets/images/3.45.png" alt="">
        <p></p>
        <p>
          <pre>
            x轴：水平向右 x右边是正值，左边是负值
y轴：垂直向下 y下面是正值，上面是负值
z轴：垂直屏幕 往外面是正值，往里面是负值
          </pre>
        </p>
        <img src="../assets/images/3.46.png" alt="">
        <p></p>
        <p>
          <pre>
            body{
            perspective: 500px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            transform: translate3d(200px,100px,100px);
        }
          </pre>
        </p>
        <img style="width:300px;" src="../assets/images/3.47.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.48.png" alt="">
        <p></p>
        <p>
          <pre>
            rotate3d(x,y,z,angle)实例：xyz是表示转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标识旋转的角度，要有效果需加透视perspective
transform: rotate3d(1,1,0,45deg);//沿着x和y轴及对角线旋转45deg，z轴不转
          </pre>
        </p>
        <img src="../assets/images/3.49.png" alt="">
        <p></p>
        <p>
          <pre>
            分别为沿着x，y，z轴旋转45deg
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
          </pre>
        </p>
        <img style="width:300px;margin-left:100px" src="../assets/images/3.50.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.51.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.52.png" alt="">
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>